import React, { useState, useEffect } from 'react';
import { message, Input } from 'antd';
import 'antd/dist/antd.css';

const Code = ({ codeString }) => {
    return (
        <pre style={{ border: '1px solid green', position: 'relative', whiteSpace: 'pre-wrap', padding: '10px' }}>
            <button style={{ position: 'absolute', right: '0px', top: 0 }}
                onClick={() => {
                    navigator.clipboard.writeText(codeString);
                    message.success('复制成功');
                }}
            >
                复制
            </button>
            {codeString}
        </pre>
    );
}


const B = () => {
    const [icons, setIcons] = useState({});
    const [selectCompName, setSelectCompName] = useState();
    const [searchStr, setSearchStr] = useState("");

    useEffect(() => {
        // 动态导入 A 页面
        import('./IconList').then(module => {
            setIcons(module)
            // 默认选中第一个组件
            setSelectCompName(Object.keys(module)[0])
        });
    }, []);

    let ShowComp = icons[selectCompName] || "div";

    return (
        <div>
            <h1>动态导入所有组件</h1>

            <div style={{ display: 'flex', gap: '20px', }}>
                <div style={{ flex: 1 }}>
                    <Input style={{ marginBottom: '10px', maxWidth: '500px' }}
                        placeholder='在此搜索图标, 右侧复制代码'
                        onChange={(e) => setSearchStr(e.target.value)}
                    />
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', }}>
                        {Object.keys(icons).filter(key => key.toLocaleLowerCase().includes(searchStr.toLocaleLowerCase()))
                            .map((key, index) => {
                                const Component = icons[key];

                                return <div key={index}
                                    style={{
                                        minWidth: '100px', height: '80px', border: '1px solid black',
                                        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                                        gap: '10px',
                                    }}
                                    onClick={() => setSelectCompName(key)}
                                >
                                    <Component />
                                    {key}
                                </div>
                            })}
                    </div>
                </div>

                {/* code */}
                <div style={{ width: '650px', border: '1px solid black', padding: '10px' }}>
                    1. 展示Icon <br />
                    <ShowComp spin /> 默认展示
                    <Code codeString={`<${selectCompName} />`} />

                    <ShowComp size={20} color="red" /> 设置大小和颜色
                    <Code codeString={`<${selectCompName} size={20} color="red" />`} />

                    2. 可点击Icon, 适合表格操作列 <br />
                    <ShowComp disabled hidden /> 主题色,封装了SgTooltip, onClick, disabled, hidden 属性
                    <Code codeString={`<SgClickIcon icon={<${selectCompName} />} desc="xxx" />`} />

                    3. 显示展示代码段 <br />
                    <Code codeString={
                        `const {SgAddIcon, SgDeleteIcon, SgQueryIcon, SgEditIcon} = SgProTable;
    ...
    render: (_, record) => {
        return (
            <div>
                <SgAddIcon onClick={() => {}} />
                <SgDeleteIcon onClick={() => {}} />
                <SgQueryIcon onClick={() => {}} />
                <SgEditIcon onClick={() => {}} />
            </div>
        )
    }`} />
                    4. icon列表中没有? 请补充到: src/components/SgUI/icons/index.tsx
                </div>
            </div>
        </div >
    );
};

export default B;


